<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-25 19:41:42
 * @LastEditDate: Do not exit
-->
<template>
  <div>
    <el-container>
      <el-header>
        <Head />
      </el-header>

      <el-main>
        <!-- 导航 -->
        <div class="na">
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#fffeee"
            text-color="#000"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="1">人气口红爆品</el-menu-item>
            <el-submenu index="2">
              <template slot="title">魅力彩妆</template>
              <el-submenu index="2-1">
                <template slot="title">脸部彩妆</template>
                <el-menu-item index="粉底">粉底</el-menu-item>
                <el-menu-item index="2-1-2">修容</el-menu-item>
                <el-menu-item index="2-1-3">高光</el-menu-item>
                <el-menu-item index="2-1-4">腮红</el-menu-item>
              </el-submenu>
              <el-menu-item index="2-2">唇部彩妆</el-menu-item>
              <el-menu-item index="2-3">眼部彩妆</el-menu-item>
              <el-submenu index="2-4">
                <template slot="title">眉部彩妆</template>
                <el-menu-item index="2-4-1">眉粉</el-menu-item>
                <el-menu-item index="2-4-2">眉膏</el-menu-item>
                <el-menu-item index="2-4-3">眉笔</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="3">护肤必选</el-menu-item>
            <el-menu-item index="4">新品推荐</el-menu-item>
            <el-menu-item index="5">会员中心</el-menu-item>
          </el-menu>
        </div>

        <div class="buy-body">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="text-align: left;">
            <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>首页</el-breadcrumb-item>
            <el-breadcrumb-item>
              购物车
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div class="buy-tbody">
            <div>
              <div style="text-align: left">
                <h3>收货人地址</h3>
              </div>
              <div style="padding: 3%">
                <span class="name">{{ receiver.receiverName }}</span>
                <span class="phone" style="margin-right:20px">{{ receiver.receiverMobile }}</span>
                <span class="address">{{ receiver.receiverProvince }}{{ receiver.receiverCity}}{{ receiver.receiverDistrict }}{{ receiver.receiverZip}}</span>
                <el-tag type="danger" size="mini" v-if="isDefault">默认地址</el-tag>
                <el-link @click="newAddress">新建</el-link>
                <el-link @click="changeAddress">更换</el-link>
              </div>
            </div>
            <div>
              <div style="text-align: left">
                <h3>运送服务</h3>
                <div
                  style="
                    width: 100%;
                    background-color: rgb(255, 254, 238);
                    height: 2px;
                  "
                ></div>
              </div>
              <div style="padding: 3%">
                <span
                  >发货后可用物流单号追踪您的包裹，点击“个人中心—我的订单—物流追踪”即可查询。</span
                >
              </div>
            </div>
            <div>
              <div style="text-align: left">
                <h3>确认商品信息</h3>
                <div
                  style="
                    width: 100%;
                    background-color: rgb(255, 254, 238);
                    height: 2px;
                  "
                ></div>
              </div>
              <div style="padding: 3%">
                <div class="car-table">
                  <el-table
                    ref="multipleTable"
                    :data="carData"
                    stripe
                    style="width: 100%"
                  >
                    <!-- <el-table-column type="selection" width="55" prop="id"></el-table-column> -->
                    <el-table-column prop="mainImage" label="商品图片">
                        <template slot-scope="scope">            
                            <img :src="scope.row.mainImage"  height="70" />
                          </template>  
                    </el-table-column>
                    <el-table-column prop="title" label="名称"></el-table-column>
                    <el-table-column prop="nowPrice" label="单价"></el-table-column>
                    <el-table-column prop="goodNum" label="数量"></el-table-column>
                    <el-table-column prop="allPrice" label="小计"></el-table-column>
                  </el-table>

                  <hr />
                  <div class="total">
                    <p>商品总数: {{num}}</p>
                    <p>运费: ￥0</p>
                    <h4>应付总金额: ￥{{allMoney}}</h4>
                  </div>
                  <hr />
                  <div class="allBtn">
                    <button
                      class="btn"
                      onmouseover="this.style.backgroundColor='pink';"
                      onmouseout="this.style.backgroundColor='';"
                      @click="pay"
                    >支付
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-dialog title="支付" :visible="visible" :before-close="handleClose">

          <div><span style="color:pink;font-size:20px;margin:5px">订单创建成功!请前往个人中心进行支付。</span></div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="visible = false">再想想</el-button>
              <el-button type="primary" @click="jumpZ">去支付</el-button>
            </span>

        </el-dialog>
        <el-dialog
          :visible="addressDiaVisible"
          :title="addressDiaTitle"
          :before-close="handleClose"
          width="650px"
        >
          <el-form :model="addressForm"  label-width="100px"  ref="addressForm" v-if="addressDiaTitle==='新建地址'"  style="width:310px;margin-left:150px">
        <el-form-item label="姓名：" prop='receiverName' 
        :rules="[{required:true,message:'姓名不能为空',trigger:'blur'}]">
          <el-input v-model="addressForm.receiverName"  style="width:210px"></el-input>
        </el-form-item>
        <el-form-item label="电话："  prop='receiverMobile'
        :rules="[{required:true,message:'电话不能为空',trigger:'blur'}]">
          <el-input v-model.number="addressForm.receiverMobile" type="telephone"  style="width:210px"></el-input>
        </el-form-item>
        <el-form-item label="地址："  :rules="[{required:true,message:'',trigger:'blur'}]">
          
          <el-cascader :options="option" v-model="addressForm.address" @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址：" label-width="100px" prop="receiverZip" :rules="[{required:true,message:'详细地址不能为空',trigger:'blur'}]" >
          <el-input v-model="addressForm.receiverZip" type="textarea" rows="3" style="width:210px"></el-input>
        </el-form-item>
        <div>
           <el-form-item >
          <el-checkbox v-model="addressForm.defaultAdd"> 默认地址</el-checkbox>
        </el-form-item>
        </div>
        <el-form-item >
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submitForm('addressForm')">确定</el-button>
        </el-form-item>
      </el-form>
          <el-form v-else :model="address">
            <el-form-item label="地址：" label-width="100px">
            <el-select v-model="address.add" placeholder="请选择地址" style="width:300px">
              <el-option v-for="item in adds" :value="item.id" :label="item.addr" :key="item.id" style="width:300px">
              </el-option>
            </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="change" type="primary">确定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <div class="fourth-rail">
          <div class="fourth-title">
            <img src="@/assets/images/w.jpg" alt="" />
          </div>
          <div class="fourth-body"></div>
        </div>

        <div class="fifth-rail">
          <div class="fifth-left">
            <div class="fl1">
              <p><strong>关于我们</strong></p>
              <ul style="list-style: none; margin-left: -40px">
                <li><el-link>商户介绍</el-link></li>
                <li><el-link>联系我们</el-link></li>
                <li><el-link>正品承诺</el-link></li>
              </ul>
            </div>
            <div class="fl1">
              <p><strong>消费者指南</strong></p>
              <ul style="list-style: none; margin-left: -40px">
                <li><el-link>新手指南</el-link></li>
                <li><el-link>常见问题</el-link></li>
                <li><el-link>通关税费</el-link></li>
              </ul>
            </div>
            <div class="fl1">
              <p><strong>物流配送</strong></p>
              <ul style="list-style: none; margin-left: -40px">
                <li><el-link>配送方式</el-link></li>
                <li><el-link>运费标准</el-link></li>
                <li><el-link>物流跟踪</el-link></li>
              </ul>
            </div>
            <div class="fl1">
              <p><strong>售后政策</strong></p>
              <ul style="list-style: none; margin-left: -40px">
                <li><el-link>退货政策</el-link></li>
                <li><el-link>退货流程</el-link></li>
                <li><el-link>联系客服</el-link></li>
              </ul>
            </div>
            <div class="fl1">
              <p><strong>网站政策</strong></p>
              <ul style="list-style: none; margin-left: -40px">
                <li><el-link>服务条款</el-link></li>
                <li><el-link>隐私条款</el-link></li>
              </ul>
            </div>
          </div>
          <div class="fifth-right">
            <img src="@/assets/images/er.jpg" alt="" />
            <p><strong>关注我们</strong></p>
          </div>
        </div>
      </el-main>

      <el-footer>
        <Foot />
      </el-footer>
    </el-container>
  </div>
</template>


<script>
import Head from "@/views/layout/Head.vue";
import Foot from "@/views/layout/Foot.vue";
import { selectDefault,selectAddressByMemberId,selectByIdA,insert} from "@/api/address.js";
import {selectByMeId,removeByMeId} from "@/api/cart.js";
import {addOrder} from "@/api/order.js";
import ShareData from '@/utils/localStorage.js'
import { regionData ,CodeToText } from "element-china-area-data";

export default {
  components: {
    Head,
    Foot,
  },
  data() {
    return {
      receiver: {
        recevierAddress: "",
        recevierPhone: "",
        recevierName: "",
      },
      address:{add:""},
      adds:[],
      visible: false,
      addressDiaVisible: false,
      addressDiaTitle: "新建地址",
      option:regionData,
      addressForm:{receiverName:"",receiverMoblie:"",receiverProvince:"",receiverDistrict:"",receiverCity:"",zip:"",defaultAddress:false},
      activeIndex2: "",
      head:"https://zpl-1303223223.cos.ap-beijing.myqcloud.com",
      carData: [],
      num:0,
      isDefault:true,
      allMoney:0,
      order:{},
    };
  },
  created(){
    this.loadCar();
    this.showDefaultAdd();
  },
  methods: {
    handleClose(){
      this.visible=false
      this.addressDiaVisible=false
    },
    pay(){
      this.order.memberId=ShareData.getItem("memberId");
      this.order.shippingUser=this.receiver.receiverName;
      this.order.deleteStatus=0;
      this.order.addressId=this.receiver.id;
      this.order.paymentMethod=3;
      this.order.orderMoney=this.allMoney;
      this.order.paymentMoney=this.allMoney;
      this.order.orderStatus=0;
      // console.log(this.order)
      addOrder(this.order).then(res=>{
        if(res.data.code==="0000"){
          // this.$message.success("成功");
          let mId=ShareData.getItem("memberId");
            removeByMeId(mId).then(res=>{
              if(res.data.code==="0000"){
                this.visible=true;
              }
            })
        }
      });
    },
    newAddress(){
      this.addressDiaVisible=true
      this.addressDiaTitle="新建地址"
    },
    handleChange(){
      this.addressForm.receiverProvince=CodeToText[this.addressForm.address[0]]
      this.addressForm.receiverCity=CodeToText[this.addressForm.address[1]]
      this.addressForm.receiverDistrict=CodeToText[this.addressForm.address[2]]
    },
    showDefaultAdd() {
      this.memberId = ShareData.getItem("memberId");
      selectDefault(this.memberId).then((res) => {
        console.log(res);
        if (res.data.code === "0000") {
          this.receiver = res.data.data;
        }
      });
    },
    changeAddress(){
      this.addressDiaVisible = true;
      this.addressDiaTitle = "更换地址";
      selectAddressByMemberId(this.memberId).then(res=>{
        console.log(res)
        if (res.data.code === "0000") {
          res.data.data.forEach(element => {
            let add=element
            add.addr=element.receiverName+"  "+element.receiverMobile+"  "+element.receiverProvince+element.receiverProvince+element.receiverCity+element.receiverDistrict+element.receiverZip
            this.adds.push(add)
          });
        }
      })
    },
    change(){
        selectByIdA(this.address.add).then(res=>{
          if(res.data.code==="0000"){
            this.receiver=res.data.data
            if(this.receiver.defaultAddress===0){
              this.isDefault=false
            }else{
              this.isDefault=true
            }
            this.addressDiaVisible=false
            this.adds=[]
          }
        })
    },
    submitForm(addressForm){
      this.$refs[addressForm].validate((valid) => {
          if (valid) {
            this.addressForm.memberId=this.memberId
             if(this.addressForm.defaultAdd===true){
              if(this.isShow===false){
                this.$notify({
                title:"小提示",
                message:"默认地址只能设置一个，若存在已设定默认地址将自动取消"
                })
              this.isShow=true
              }
              this.addressForm.defaultAddress=1
            }else{
              this.addressForm.defaultAddress=0
            }
              insert(this.addressForm).then(res=>{
              if(res.data.code==="0000"){
                this.receiver=this.addressForm
                this.isDefault=true
                this.addressDiaVisible=false
              }else{
                this.$message.error("添加失败，请检查网络")
              }
            })
            }
          else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    loadCar(){
      let mid=ShareData.getItem("memberId");
      selectByMeId(mid).then(res=>{
        if(res.data.code==="0000"){
          this.carData=res.data.data;
          for(let i=0;i<this.carData.length;i++){
            this.carData[i].mainImage=this.head+this.carData[i].mainImage;
            this.carData[i].allPrice=this.carData[i].goodNum*this.carData[i].nowPrice;
            this.num+=this.carData[i].goodNum;
            this.allMoney+=this.carData[i].allPrice;
          }
        }
      })
    },
    jumpZ(){
      this.$router.push("/order");
    },
  },
};
</script>

<style scoped>
.el-container {
  min-height: 100%;
}
.el-header {
  background-color: #fff;
  color: #333;
  text-align: center;
  /* line-height: 100px; */
}
.el-main {
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #333;
  text-align: center;
}
.el-main::-webkit-scrollbar {
  display: none;
}
.el-footer {
  background-color: rgb(173, 163, 163);
  color: #333;
  text-align: center;
  line-height: 60px;
}
.na {
  margin: 0px 80px 0px;
}

.buy-body {
  width: 80%;
  margin-left: 7%;
  background-color: rgb(240, 173, 173);
  padding: 3%;
}
.buy-tbody {
  padding: 2%;
}
.buy-tbody span {
  font-size: 18px;
}
.buy-tbody .el-link {
  float: right;
  margin-right: 50px;
}
.total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.allBtn {
  display: flex;
  justify-content: space-around;
}
.btn {
  width: 220px;
  height: 60px;
  background-color: #000;
  color: #fff;
}
.name {
  border: 2px solid black;
  padding: 1%;
  margin-right: 5%;
  margin-top: -1%;
  float: left;
}
.fourth-title {
  margin-top: 30px;
  height: 100px;
}
.fourth-title img {
  width: 100%;
  margin-top: 50px;
}
.fifth-rail {
  width: 100%;
  height: 260px;
  background-color: rgb(248, 187, 117);
}
.fifth-left {
  width: 50%;
  height: 260px;
  /* background-color: #fff; */
  margin: 0px 20px 0px;
  display: flex;
}
.fl1 {
  width: 100px;
  height: 130px;
  /* background-color: rgb(156, 35, 35); */
  margin-left: 50px;
  padding-top: 30px;
}
.fifth-right {
  width: 400px;
  height: 260px;
  /* background-color: #fff; */
  position: absolute;
  margin-top: -230px;
  margin-left: 900px;
}
.el-dialog{
  text-align: center;
}
.el-form{
  width: 600px;
}
.el-input{
  width: 150px;
}
.el-select{
  width: 116px;
}
.el-option{
  width: 116px;
}
</style>